<template>
  <div>
    <div class="container">
      <div class="handle-box">
        <el-select class="handle-input mr10" v-model="search.kindId" placeholder="交易内容" @change="getData()">
          <el-option v-for="item in kindList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-input v-model="search.user" placeholder="登录用户" class="handle-input mr10" width="55"></el-input>
        <span class="mr10">
          <el-date-picker v-model="time" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </span>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <el-button type="primary" icon="el-icon-lx-add" @click="showBox()">添加</el-button>
        <el-button type="primary" icon="el-icon-lx-friendadd" @click="showExport = true">导出</el-button>
        <!-- <el-button type="primary" @click="reload()">刷新页面</el-button> -->
      </div>
      <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
        <el-table-column prop="context" label="交易内容"></el-table-column>
        <el-table-column prop="name" label="登录用户"></el-table-column>
        <el-table-column prop="money" label="交易金额"></el-table-column>
        <el-table-column prop="remarks" label="交易对象(备注)"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag v-if="scope.row.status == '0'">减</el-tag>
            <el-tag v-else>加</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="创建时间" :formatter="dateFormat"></el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex" :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
      </div>
    </div>
    <!-- 编辑弹出框 -->
    <el-dialog title="编辑框" v-model="showAddUser" width="60%">
      <el-form ref="form" :model="list" label-width="100px" :disabled="isDisabled">
        <el-form-item label="选择币种">
          <el-select class="handle-input mr10" v-model="list.kindId" placeholder="选择币种">
            <el-option v-for="item in kindList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="登录用户">
          <el-input v-model="list.user"></el-input>
        </el-form-item>
        <el-form-item label="交易金额">
          <el-input v-model="list.money" type="number"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="list.remarks"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="list.status" :disabled="isDisabled">
            <el-radio :label="0">减</el-radio>
            <el-radio :label="1">加</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showAddUser = false">取 消</el-button>
          <el-button v-if="isChange == 1" type="primary" @click="append">确 定</el-button>
          <el-button v-else type="primary" @click="edit">修改</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 导出框 -->
    <el-dialog title="导出明细" v-model="showExport" width="40%">
      <el-form ref="form" :model="eList" label-width="100px">
        <el-form-item label="选择币种">
          <el-select class="handle-input mr10" v-model="eList.kindId" placeholder="选择币种">
            <el-option v-for="item in kindList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="list.mobile"></el-input>
        </el-form-item>
        <el-form-item label="创建时间范围">
          <el-date-picker v-model="etime" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showExport = false">取 消</el-button>
          <el-button type="primary" @click="confirmExport">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { api, apiEx } from '../../../api/index'
import { formatDate } from '../../../common/data'
import moment from 'moment'
export default {
  inject: ['reload'],
  filters: {
    formatDate(time) {
      time = time * 1000
      let date = new Date(time)
      console.log(new Date(time))
      return formatDate(date, 'yyyy-MM-dd hh:mm')
    },
  },
  name: 'basetable',
  data() {
    return {
      query: {
        pageNo: 1,
      },
      time: '',
      kindList: [],
      search: {
        user: '',
        kindId: 2,
      },
      tableData: [],
      pageTotal: 0,
      list: {},
      showAddUser: false,
      isChange: '',
      isDisabled: false,
      isOfficial: localStorage.getItem('isOfficial'),
      showExport: false,
      eList: {},
      etime: '',
    }
  },
  created() {
    this.getKindList()
  },
  mounted() {},
  methods: {
    dateFormat: function (row, column) {
      var date = row[column.property]
      if (date == undefined) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    },
    //显示编辑框
    showBox() {
      this.showAddUser = true
      this.isChange = 1
      this.isDisabled = false
    },
    //新增
    append() {
      api('/web/cyBer/add', this.list).then((res) => {
        if (res.code === 2000) {
          this.$message.success(res.message)
          this.list = {}
          this.reload()
          this.showAddUser = false
        } else {
          this.$message.error(res.message)
          this.list = {}
        }
      })
    },
    // 触发搜索按钮
    handleSearch() {
      this.query.pageNo = 1
      this.getData()
    },
    getKindList() {
      api('/web/daKind/s').then((res) => {
        this.kindList = res.data
        this.search.kindId = res.data[0].id
        this.getData()
      })
    },
    // 获取分类列表
    getData() {
      let endTime = formatDate(new Date(this.time[1]), 'yyyy-MM-dd hh:mm:ss')
      let startTime = formatDate(new Date(this.time[0]), 'yyyy-MM-dd hh:mm:ss')

      if (localStorage.getItem('isOfficial') == 0) {
        api('/web/cyBer/list', {
          user: this.search.user,
          kindId: this.search.kindId,
          limit: 10,
          offset: this.query.pageNo,
          endTime: endTime == 'NaN-aN-aN aN:aN:aN' ? '' : endTime,
          startTime: startTime == 'NaN-aN-aN aN:aN:aN' ? '' : startTime,
          appointUser: this.$store.state.adminMsg.parentId,
        }).then((res) => {
          // console.log(res.data);
          this.tableData = res.data.rows
          this.pageTotal = res.data.total
        })
      } else {
        api('/web/cyBer/list', {
          mobile: this.search.user,
          kindId: this.search.kindId,
          limit: 10,
          offset: this.query.pageNo,
          endTime: endTime == 'NaN-aN-aN aN:aN:aN' ? '' : endTime,
          startTime: startTime == 'NaN-aN-aN aN:aN:aN' ? '' : startTime,
        }).then((res) => {
          // console.log(res.data);
          this.tableData = res.data.rows
          this.pageTotal = res.data.total
        })
      }
    },

    // 分页导航
    handlePageChange(val) {
      // console.log(val);
      this.query.pageNo = val
      this.getData()
    },
    confirmExport() {
      this.showExport = false
      this.eList.startTime = formatDate(new Date(this.etime[0]), 'yyyy-MM-dd')
      this.eList.endTime = formatDate(new Date(this.etime[1]), 'yyyy-MM-dd')
      apiEx('/web/cyBer/export', this.eList).then((res) => {
        const blob = new Blob([res]) // 创建blob对象
        const fileName = '资金明细记录.xlsx'
        const elink = document.createElement('a') // 创建的标签
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob) // 创建url
        document.body.appendChild(elink) // 把 创建的标签追加到body里
        elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink) // 移除标签
        this.$message({
          message: '导出成功！！！',
          type: 'success',
        })
        this.$refs.multipleTable.clearSelection()
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.mr10 {
  margin-right: 10px;
}
</style>
